/**
 * ECharts配置相关代码
 */


var dom = $("#container")[0];
var myChart = echarts.init(dom);
var option = null;


/**
 * [初始化series]
 * @return {对象数组} [返回series对象数组]
 */
function initSeries() {
    var mySeries = [

        // 警车位置散点图数据
        {
            id: 'carPosition',
            type: 'scatter',
            coordinateSystem: 'bmap',
            symbol: 'path://M626.688 106.496l-16.384-8.192-24.576 40.96 16.384 8.192L626.688 106.496zM606.208 217.088l45.056-8.192-4.096-16.384-45.056 8.192L606.208 217.088zM524.288 61.44l-16.384 0 0 45.056 16.384 0L524.288 61.44zM933.888 569.344l-36.864 0-45.056-245.76c0-45.056-36.864-81.92-86.016-81.92-4.096 0-4.096 0-4.096 0l0 0 0 0-180.224 0L581.632 192.512l0 0c0 0 0 0 0 0 0-36.864-28.672-65.536-61.44-65.536-36.864 0-61.44 28.672-61.44 65.536 0 0 0 0 0 0l0 0L458.752 245.76 270.336 245.76l0 0 0 0c0 0 0 0-4.096 0C221.184 245.76 180.224 282.624 180.224 327.68l-45.056 245.76L90.112 573.44C40.96 569.344 0 614.4 0 667.648l0 204.8 73.728 0 0 28.672c0 36.864 28.672 61.44 61.44 61.44s61.44-28.672 61.44-61.44l0-28.672 626.688 0 0 28.672c0 36.864 28.672 61.44 61.44 61.44 36.864 0 61.44-28.672 61.44-61.44l0-28.672L1024 872.448l0-204.8C1024 614.4 983.04 569.344 933.888 569.344zM135.168 778.24c-36.864 0-61.44-28.672-61.44-61.44 0-36.864 28.672-61.44 61.44-61.44s61.44 28.672 61.44 61.44C200.704 749.568 172.032 778.24 135.168 778.24zM253.952 569.344l45.056-200.704 425.984 0 45.056 200.704L253.952 569.344zM888.832 778.24c-36.864 0-61.44-28.672-61.44-61.44 0-36.864 28.672-61.44 61.44-61.44 36.864 0 61.44 28.672 61.44 61.44C950.272 749.568 921.6 778.24 888.832 778.24zM430.08 200.704 385.024 192.512 380.928 208.896l45.056 8.192L430.08 200.704zM442.368 139.264l-24.576-36.864L405.504 110.592l24.576 36.864L442.368 139.264z',
            symbolSize: 15,
            data: []
        },

        // 警车路线数据图：路线
        {
            id: 'policeCarLine',
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: [],
            silent: true,
            lineStyle: {
                normal: {
                    color: '#c23531',
                    color: 'rgb(200, 35, 45)',
                    opacity: 0.2,
                    width: 1
                }
            },
            progressiveThreshold: 500,
            progressive: 200
        },

        // 警车路线数据图：动态车辆展示
        {
            id: 'policeCarEffect',
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: true,
            data: [],
            lineStyle: {
                normal: {
                    width: 0
                }
            },
            effect: {
                constantSpeed: 20,
                show: true,
                trailLength: 0.1,
                symbolSize: 1.5
            },
            zlevel: 1
        },

        // 选框数据
        {
            id: 'selectBar',
            type: 'bar',
            zlevel: 2,
            symbol: 'none',
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            },
            data: []
        },

        // 热力图数据
        {
            id: 'freqHeatmap',

            // name: 'AQI',
            type: 'heatmap',
            coordinateSystem: 'bmap',
            data: []
        }
    ];

    // 添加分类案情信息
    convertEventData2Series(eventData, mySeries);

    return mySeries;
}



// ECharts配置项
option = {
    // backgroundColor: '#404a59',
    backgroundColor: '#ccc',

    animation: true,

    animationDuration: 1000,

    animationEasing: 'cubicInOut',

    animationDurationUpdate: 1000,

    animationEasingUpdate: 'cubicInOut',

    title: [{
        id: 'statistic',
        right: 120,
        top: 40,
        width: 100,
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    }],

    toolbox: {
        iconStyle: {
            normal: {
                borderColor: '#fff'
            },
            emphasis: {
                borderColor: '#b1e4ff'
            }
        },
        feature: {
            // dataZoom: {},
            saveAsImage: {
                show: true
            }
        }
    },

    brush: {

    },

    // 百度地图JavaScript API
    bmap: {
        // map: 'china',
        right: '100',
        // right: '55%',
        // center在后面被覆盖
        center: [104.40, 30.67],
        // zoom: 11,
        label: {
            emphasis: {
                show: false
            }
        },
        // 是否开放鼠标缩放和平移
        // 这里会和框选冲突
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },

    tooltip: {
        trigger: 'item'
    },

    // grid: {
    //     right: 30,
    //     top: 100,
    //     bottom: 40,
    //     width: '30%'
    // },

    grid: {
        // show: true,
        right: 12,
        top: 50,
        width: '20%'
            // backgroundColor:'#ccc'
    },

    xAxis: {
        type: 'value',
        scale: true,
        position: 'top',
        boundaryGap: false,
        splitLine: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            margin: 2,
            textStyle: {
                color: '#aaa'
            }
        },
    },

    yAxis: {
        type: 'category',
        // name: 'TOP 20',
        nameGap: 16,
        axisLine: {
            show: false,
            lineStyle: {
                color: '#ddd'
            }
        },
        axisTick: {
            show: false,
            lineStyle: {
                color: '#ddd'
            }
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                fontFamily: "SimSun",
                color: '#f4e925',
                fontSize: 12
            }
        },
        data: []
            // nameTextStyle:{
            //   color:'black'
            // }
    },

    legend: {
        left: '10%',
        textStyle: {
            color: '#fff',
            fontSize: 14
        },
        data: createLegendData(eventData)
    },

    dataZoom: [
        // {
        //     type: 'slider',
        //     show: true,
        //     xAxisIndex: [0],
        //     start: 1,
        //     end: 35,
        //     bottom: 0
        // }, 
        {
            start: 0,
            end: 100,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }
    ],

    visualMap: [
        // 热力图的颜色映射
        {
            id: 'visualMapHeat',
            type: 'continuous',
            right: 10,
            bottom: 100,
            show: false,
            seriesIndex: 4,
            min: 0,
            max: 500,
            calculable: true,
            text: ['高', '低'],
            textStyle: {
                color: '#fff'
            },
            inRange: {
                color: ['#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            }
        },

        // 散点图的颜色映射
        // {
        //     type: 'continuous',
        //     left: 10,
        //     bottom: 100,
        //     seriesIndex: (function() {
        //         var res = [];
        //         for (var i = 0; i < eventData.length; i++) {
        //             res.push(i + 5);
        //         }
        //         return res;
        //     })(),
        //     min: 0,
        //     max: 50,
        //     calculable: true,
        //     text: ['高', '低'],
        //     textStyle: {
        //         color: '#fff'
        //     },
        //     inRange: {
        //         color: ['#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        //     }
        // }
    ],

    series: initSeries()
}; // end option


// 初始化图表
if (option && typeof option === "object") {
    myChart.showLoading();
    // 初始化
    myChart.setOption(option, true);
    // 设置brush事件相关
    myChart.setOption({
        brush: {
            toolbox: ['rect', 'polygon', 'keep', 'clear'],
            outOfBrush: {
                color: '#abc'
            },
            brushStyle: {
                borderWidth: 2,
                color: 'rgba(0,0,0,0.5)',
                borderColor: 'rgba(0,0,0,0.9)',
            },
            throttleType: 'debounce',
            throttleDelay: 300,
            geoIndex: 0,
            // 根据series设置brush事件的seriesIndex
            seriesIndex: (function() {
                var brushSeriesIndex = [];
                var eventDataLen = eventData.length;
                var seriesLen = myChart.getOption().series.length;
                for (var i = seriesLen - eventDataLen; i < seriesLen; i++) {
                    brushSeriesIndex.push(i);
                }
                return brushSeriesIndex;
            })()
        }
    });
    myChart.hideLoading();
}
